<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .bakk {
            background-color: #999;
            border-radius: 50%;
            padding: 0 4px;
            font-size: 8px;
            color: white;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="text" @keyup.enter="btnAdd" v-model="qingdan">
        <span v-html="qingdan"></span>
        <ul>
            <li v-for="(item,index) in msgArr" :key="index">
                <span v-html="item"></span> <span :class="{bakk:true}" @click="btnClear(index)"> &Chi; </span>
            </li>
        </ul>
        <p v-html="msgArr.length+'条纪录'"></p><button @click="btnClearAll">清空</button>

    </div>

    <script>
        let vue = new Vue({
            el: '#app',
            data() {
                return {
                    msgArr: [],
                    qingdan: '',

                }
            },
            methods: {
                btnClear: function (index) {
                    console.log(`删除${index}`);
                    //从下标为index开始，删1个
                    // this.msgArr.splice(index,1);
                    this.$delete(this.msgArr,index);
                    console.log(this.msgArr);
                },
                btnClearAll: function () {
                    console.log("清空");
                    this.msgArr = [];
                    this.qingdan = '';
                },
                btnAdd: function () {
                    console.log(`增加${this.qingdan}`);
                    // this.msgArr.push(this.qingdan);
                    //(下标，删除，增加)
                    // this.msgArr.splice(this.msgArr.length,0,this.qingdan);
                    //this.$set(要修改的数组，要修改的下标，要修改成的值)
                    this.$set(this.msgArr,this.msgArr.length,this.qingdan)
                    this.qingdan = '';
                }
            }
        })
    </script>
</body>

</html>